<template>
  <base-layout>
    <template #contentPanel>
      <div class="bg-form">
        <el-form
          :model="addForm"
          label-width="80px"
          :show-message="false"
          :rules="addFormRules"
          ref="addForm"
          disabled
        >
          <el-row>
            <el-col :span="12">精品信息</el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item label="订单号:" prop="orderNo">
                <el-input
                  v-model="addForm.orderNo"
                  clearable
                  placeholder="请输入订单号"
                ></el-input>
              </el-form-item>
              <el-form-item label="客户手机:" prop="phoneNum">
                <el-input
                  v-model="addForm.phoneNum"
                  clearable
                  placeholder="请输入客户手机"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户名称:" prop="name">
                <el-input
                  v-model="addForm.name"
                  clearable
                  placeholder="请输入客户名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="销售顾问:" prop="saleId">
                <el-select
                  class="w-100"
                  clearable
                  style="width: 150px"
                  v-model="addForm.saleId"
                  placeholder="销售顾问"
                >
                  <el-option
                    v-for="item in dataArry"
                    :key="item.index"
                    :value="item.id"
                    :label="item.userName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交车时间:" prop="deliveryTime">
                <el-date-picker
                  style="width: 100%"
                  v-model="addForm.deliveryTime"
                  type="date"
                  placeholder="交车时间"
                  clearable
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="销售时间:" prop="saleTime">
                <el-date-picker
                  style="width: 100%"
                  v-model="addForm.saleTime"
                  type="date"
                  placeholder="销售时间"
                  clearable
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="安装时间:" prop="installTime">
                <el-date-picker
                  style="width: 100%"
                  v-model="addForm.installTime"
                  type="date"
                  placeholder="安装时间"
                  clearable
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车架号:" prop="frameNo">
                <el-input
                  v-model="addForm.frameNo"
                  clearable
                  placeholder="请输入车架号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="精品费:" prop="orderAmount">
                <el-input
                  v-model="addForm.orderAmount"
                  clearable
                  placeholder="请输入精品费"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="车型:" prop="modelList">
                <CarModel
                  class="w-100"
                  v-model="modelList"
                  ref="carModel"
                  placeholder="车型组件"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <data-table
          :value="addForm.orderDetailList"
          :isShowPage="false"
          :table-column-attributes="tableColumnAttributes"
          :has-action="true"
          :width="160"
        >
          <template #action="{ row }">
            <i
              class="el-icon-delete"
              title="删除"
              style="color: red; margin-left: 20px; cursor: pointer"

              @click="handleDataDelete(row)"
            ></i>
          </template>
        </data-table>
        <el-row>
          <el-col :span="12"> 总金额:{{ totalMoney }} </el-col>
        </el-row>
      </div>
    </template>
  </base-layout>
</template>

<script>
import { getDict } from '@/utils/index'
import DataTable from '@/components/DataTable'
import { getSeries } from '@/api/after-sale/systemManage/carModel'
import { CarModel } from '@/components/index'
import { details, save } from '@/api/pre-sale/orderManagement/boutiqueOrder'
import baseMixin from '@/mixins/base'

export default {
  props: ['id'],
  components: {
    DataTable,
    CarModel
  },
  mixins: [
    baseMixin({
      idName: 'id',
      dataName: ['']
    })
  ],
  data() {
    return {
      dataArry: [],
      modelList: [],
      totalMoney: 0,
      allBrand: [], // 品牌
      allSeries: [], // 车系
      tableColumnAttributes: [
        {
          name: '精品类型',
          value: 'type',
          type: 'select',
          disabled:true,
          options: [
            {
              id: 1,
              value: '赠送'
            },
            {
              id: 2,
              value: '打包'
            },
            {
              id: 3,
              value: '销售'
            }
          ]
        },
        {
          name: '精品名称',
          value: 'detailName',
          type: 'text'
        },
        {
          name: '单价',
          value: 'detailPrice',
          type: 'input',
           disabled:true,
        },
        {
          name: '数量',
          value: 'detailCount',
          type: 'input',
           disabled:true,
        },
        {
          name: '折扣比例',
          value: 'discount',
          type: 'text'
        },
        {
          name: '安装费用',
          value: 'installCost',
          type: 'input',
           disabled:true,
        },
        {
          name: '折扣金额',
          value: 'money',
          type: 'text'
        },
        {
          name: '安装方式',
          value: 'installMethod',
          type: 'input',
           disabled:true,
        },
        {
          name: '用品属性',
          value: 'resource',
          type: 'dict',
          dict: '用品属性'
        }
      ],
      dict: {
        sites: ['订单类别'],
        types: ['PC端', 'APP端']
      },
      addForm: {
        saleId: '',
        carSeriesId: ''
      },
      addFormRules: {}
    }
  },
  async mounted() {
    this.dict = getDict(this.dict.sites)
    this.details()
  },
  methods: {
    // 保存
    async onSubmit() {
      const c = {
        carBrandId: this.modelList[0],
        carSeriesId: this.modelList[1],
        carTimeType: this.modelList[2],
        carModelId: this.modelList[3]
      }
      const dd = JSON.parse(JSON.stringify(this.addForm))
      dd.orderDetailList.map((res) => {
        res.detailPrice = res.detailPrice * 100
      })
      console.log(dd)
      const { success } = await save({ ...dd, ...c })
      if (success) {
        this.$router.push({ name: 'boutiqueOrder' })
      }
    },
    async details() {
      const { data } = await details(this.id)

      this.$nextTick(() => {
        this.modelList = [
          +data.carBrandId,
          +data.carSeriesId,
          data.carTimeType + '',
          +data.carModelId
        ]

        let totalMoney = 0
        data.orderDetailList.map((res) => {
          res.money = (res.detailPrice * res.detailCount * res.discount)
          totalMoney += res.money
        })

        this.totalMoney = totalMoney
      })
      this.addForm = data
    },
    async handleCarBrand(val) {
      if (val) {
        const { success, data } = await getSeries(val)
        if (success) {
          this.allSeries = data
        }
      } else {
        this.allSeries = []
      }
      this.addForm.carSeriesId = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.bg-form {
  background: #ffffff;
  padding: 20px;
}
</style>

